---
title: Format data using `rendertext` event
---

import siteConfig from '/docusaurus.config.js';

NB: This example is broken: https://github.com/TonyGermaneri/canvas-datagrid/issues/262

Attach to the [`rendertext`](/reference/events#rendertext) event.

<SandpackEditor>

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  schema: [
    { name: 'col1' },
    {
      name: 'col2',
      type: 'date',
    },
    { name: 'col3' },
  ],
});

grid.addEventListener('rendertext', function (e) {
  if (e.cell.rowIndex > -1) {
    if (e.cell.header.name === 'col2') {
      e.cell.formattedValue = new Date(e.cell.value).toISOString();
    }
  }
});

app.append(gridElement);
```

```json data.json
[
  { "col1": "foo", "col2": 1501744914661, "col3": "a" },
  { "col1": "bar", "col2": 1301744914661, "col3": "b" },
  { "col1": "baz", "col2": 1401744914661, "col3": "c" }
]
```

</SandpackEditor>
